<template>
  <div class="item">
    <div class="title">
      <img src="../../../assets/img/streetDance/streetDance03.jpg" alt="">
      <span>{{topicTxt}}</span>
    </div>
    <div class="body">
      <div class="left"><img v-lazy="{src:humanPic,loading:lazyPic}"></div>
      <div class="right">
        <div class="top">
          <img src="../../../assets/img/streetDance/streetDance07.jpg" alt="">
          <div class="info">
            <span class="price">￥{{goodsInfo.flash_price}}</span>
            <!-- <span class="name">{{goods_name}}</span> -->
          </div>
        </div>
        <div class="goods" @click="goodsDetail">
          <img v-lazy="{src:goodsInfo.img640_url,loading:lazyPic}">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:['parentData','moduleIdx'],
    data(){
      return{
        goodsInfo:null,
        goods_name:'',
        humanPic:'',
        topicTxt:'',
        lazyPic:require('../../../assets/img/publicImg/loading_default.png') 
      }
    },
    created(){
      this.goodsInfo=this.parentData;
      this.initName();
    },
    methods:{
      initName(){
        if(this.moduleIdx==1){
          this.goods_name='VANS闪电明星款';
          this.topicTxt='高街集合';
          this.humanPic=require('../../../assets/img/streetDance/streetDance08.jpg');
        }else if(this.moduleIdx==2){
          this.goods_name='Adidas灰橙椰子';
          this.topicTxt='玩转街头';
          this.humanPic=require('../../../assets/img/streetDance/streetDance10.jpg');
        }else if(this.moduleIdx==3){
          this.goods_name='Converse帆布鞋';
          this.topicTxt='时尚单品';
          this.humanPic=require('../../../assets/img/streetDance/streetDance12.jpg');
        }else{
          this.goods_name='NIKE联名涂鸦';
          this.topicTxt='精选同款';
          this.humanPic=require('../../../assets/img/streetDance/streetDance06.jpg');
        }
      },
      goodsDetail(){
        this.$emit('childEvent',this.goodsInfo.goods_id);
      }
    }
  }
</script>

<style lang="less" scoped>
.item{
  .title{
    position: relative;
    font-size: 0.3rem;
    text-align: center;
    color: #ffffff;
    span{
      width: 3rem;
      line-height: 0.5rem;
      height: 0.5rem;
      position: absolute;
      top: 1rem;left: 2.15rem;
    }
  }
 .body{
   width: 6.64rem;
   margin: 0 auto;
   padding: 0 0.2rem;
   overflow: hidden;
   background: #000;
   .left{
     float: left;
     width: 3rem;
     height: 5.38rem;
   }
   .right{
     float: right;
     width: 3.4rem;
     height: 5.38rem;
     .top{
       position: relative;
       .info{
         width: 2.5rem;
         height: 0.85rem;
         font-size: 0.5rem;
         line-height: 0.85rem;
         position: absolute;
         color: #FF4F20;
         top: 0.54rem;left: 1.1rem;
         .price{
           display: block;
           font-weight: 600;
         }
       }
      }
     .goods{
       width: 3rem;
       height: 3rem;
       overflow: hidden;
       margin:  0 auto;
     }
   }
 }
}
</style>